"use client";
import { FieldType } from "@/actions/listDeal";
import * as echarts from "echarts";
import { useEffect, useRef } from "react";

export default function LineEchart({
  list,
  isRotaded,
}: {
  list: FieldType[];
  isRotaded: boolean;
}) {
  const isCircle = (it: FieldType) => {
    return it.isCircle === "1" || it.holiday === "1";
  };

  const areaIndex: number[] = [];
  list.forEach((it, index) => {
    if (it.holiday === "1") {
      areaIndex.push(index);
    }
  });
  // console.log(areaIndex);
  const option: echarts.EChartsOption = {
    xAxis: {
      type: "category",
      data: list.map((it) => {
        const [a, b, c] = it.time.split("-");
        return `${b}-${c}`;
      }),
    },

    yAxis: {
      type: "value",
      min: 36,
      max: 37.6,
      interval: 2 / 10,
    },
    tooltip: {
      trigger: "axis",
      // show: true,
      // formatter: (params: any) => {
      // }
    },
    dataZoom: [
      {
        show: false,
        startValue: list.length > 30 ? list.length - 30 : 0, // 数据展示的开始位置，从结束结束位置项前展示三条
      },
      {
        zoomOnMouseWheel: true, // 控制可以左右滑动
        type: "inside", // 隐藏底部默认的滑动条
      },
    ],
    toolbox: [
      {
        show: true,
        padding: 10,
        feature: {
          saveAsImage: {},
        },
      },
    ],
    grid: [
      {
        top: 40,
        left: 46,
        right: 46,
        bottom: 40,
      },
    ],
    // visualMap: {
    //   type: "piecewise",
    //   show: false,
    //   dimension: 0,
    //   seriesIndex: 0,
    //   pieces:
    //     areaIndex.length > 1
    //       ? [
    //           {
    //             gt: Math.min(...areaIndex),
    //             lt: Math.max(...areaIndex),
    //             color: "rgba(0, 0, 180, 0.4)",
    //           },
    //         ]
    //       : undefined,
    // },

    series: [
      {
        type: "line",
        data: list.map((it) => {
          return {
            value: it.num,
            symbolSize: isCircle(it) ? 8 : 0.01,
            itemStyle: {
              // normal: {
              //   show: true,
              // },
              color: isCircle(it) ? (it.holiday=='1' ? "orange" : "red") : "blue",
            },
            label: {
              show: true,
              fontSize: 9,
              formatter: (params: any) => {
                return params.value;
              },
            },

            // symbol: it.isCircle === "1" ? "circle" : "circle",
            // symbol: "circle",
          };
        }),

        // markLine: {
        //   data: [{ type: "average", name: "Avg" }],
        // },
        // markPoint: {
        //   data: [
        //     { type: "max", name: "Max" },
        //     { type: "min", name: "Min" },
        //   ],
        // },
        symbol: function (value: number, params: any) {
          // console.log(params);
          const { dataIndex } = params;
          const item = list[dataIndex] as FieldType;
          if (item.holiday === "1") {
            return "triangle"; //拐点不显示 none
          }
          return "circle"; //拐点类型
        },
        // areaStyle: areaIndex.length > 1 ? {} : undefined,

        lineStyle: {
          color: "#5470C6",
          width: 2,
          // type: 'dashed'
        },
        itemStyle: {
          borderWidth: 1,
          // normal: {
          //   show: true, // 设置标记一直显示
          // },
          // borderColor: 'blue',
          // color: 'blue'
        },
      },
    ],
  };
  const echartsInstance = useRef<echarts.ECharts>();
  const resizeEchart = () => {
    echartsInstance.current?.resize({
      animation: {
        duration: 1000,
        easing: "cubicInOut",
      },
    });
  };
  const renderEchart = () => {
    if (document.getElementById("container") == null) {
      return;
    }
    if (echartsInstance.current) {
      echartsInstance.current.setOption(option);
      return;
    }
    echartsInstance.current = echarts.init(
      document.getElementById("container") as HTMLElement
    );
  };
  useEffect(() => {
    renderEchart();
  });

  useEffect(() => {
    resizeEchart();
  }, [isRotaded]);

  useEffect(() => {
    window.addEventListener("resize", resizeEchart, false);
    return () => {
      window.removeEventListener("resize", resizeEchart, false);
    };
  }, []);
  return <div className="w-full h-full" id="container"></div>;
}
